@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

body {
background: rgb(56,149,131);
background: linear-gradient(0deg, rgba(56,149,131,1) 0%, rgba(29,68,46,1) 100%);
color: #F6F6F2;
font-family: "Poppins", sans-serif;
font-weight: 400;
font-style: normal;
}

a {
color: #05396b;
background-color: white;
}

pre {
background: #C2EDCE;
border-color: #388087;
}

Project requirements

I have met the requirements related to working with GitHub in regards to the README.md file this is because:

And here is the link I recorded that goes to my stats220 GitHub repo: stats220.repo

I have also met the requirements related to working with GitHub in regards to using GitHub pages:

And here is the link to my GitHub Page: GitHub Page

Screenshot of my Project1 folder
Screenshot of my Project1 folder

Even though the three images that I used in both my static and animated meme (HappyOpp.jpeg, SadOpp.png, glasses.png) was through using their respective links in my code. I downloaded the original photos and added them to my Project1 folder to satisfy the requirement “all files and images used for this project should be visible” so I did this as I wanted to be safe. This folder also has the files for the GitHub page that I created.

My meme

My Inspiration Meme
My Inspiration Meme

This was the meme that I took inspiration from. The key components and features of the image that I recreated and/or changed were:

  1. Changing each of the images of the meme
  2. Replacing the actual text of the meme
  3. Changing the font of the text
  4. Changing the colour of the text to white
  5. Changing the colour of the text background to black

The reason I made these changes is because I wanted to keep the theme of the meme similar in terms of keeping it school/procrastination/assignment related while also having correlation to the images. Therefore I changed the text so it was more suited and I changed the two images but chose ones that I think have similar resemblance (one being positive and one being negative, matching Drake agreeing and disagreeing). I changed the flipped the colour of the text and the colour of the text background because I felt like it poppoed more especially with the images I chose. Then I changed the font of the text to arial which is similar to the original but I just liked the simplicity of it. The format of the meme is the same as the inspiration meme (2 images on the left, 2 text boxes on the left) but it has just been recreated with the different features listed above. Overall those were the key components and features of the meme that were recreated/changed which made the meme unique but it still relates to the inspiration meme.

In regards to creating the animated meme. I decided to add cool glasses that moved from above the happy photo to on top of the happy photo so it looked like he was wearing them. In total my animation is 10 frames long because the first five are gradually moving to the target (directly above habby photo eyes). Then the last five are going from the target point back to the starting position using the rev() function. I decided to do this so when the animated meme restarts it’s very smooth and doesn’t just cut from the desired positon back to the start, it instead doesn’t cut and has a very clean loop. The reason why I decided to add the glasses in general was because I thought it really suited my meme. I feel like the cool glasses add to the happy mood in the lower part of the meme and emphasise the being chill about starting the project so close to when it’s due. Because the pictures I chose to use for the meme weren’t as vibrant as my inspiration meme I wanted to add something that would look cool animated but also add something attention grabbing - So I feel as if this creates even more resemblance. Also, overall I felt as if the animated glasses add more life to the meme and my animated meme is directly linked to my static meme.

library(magick)

# static meme code

# top left frame image
sad_oppenheimer <- image_read("https://www.comingsoon.net/wp-content/uploads/sites/3/2023/05/oppenheimer-cillian.png") %>%
  image_crop("593x500.34+300") %>%
  image_noise()

# top right frame text
top_text <- image_blank(width = 500,
                        height = 500,
                        color = "black") %>%
  image_annotate(text = "Starting project 1 a\nweek before it's due",
                 color = "white",
                 size = 50,
                 font = "arial",
                 gravity = "center")

# bottom left frame image
happy_oppenheimer <- image_read("https://i.kym-cdn.com/entries/icons/original/000/045/846/oppsmile.jpg") %>%
  image_crop("593x500.34+300") %>%
  image_noise()

# bottom right frame text
bottom_text <- image_blank(width = 500,
                           height = 500,
                           color = "black") %>%
  image_annotate(text = "Starting 2 hours\nbefore the due date",
                 color = "white",
                 size = 50,
                 font = "arial",
                 gravity = "center")

# creating each row of the meme

# creating the top row
sad_vector <- c(sad_oppenheimer, top_text)
top_row <- image_append(sad_vector)

# creating the bottom row
happy_vector <- c(happy_oppenheimer, bottom_text)
bottom_row <- image_append(happy_vector)

# combining vectors and putting it all together
meme <- c(top_row, bottom_row) %>%
  image_append(stack = TRUE) %>%
  image_scale(800)

# callimg my meme to print
meme

# code to save the meme as an image file
image_write(meme, "my_meme.png")
 animated meme code

# glasses image
glasses_image <- image_read("https://png.pngtree.com/png-clipart/20220927/ourmid/pngtree-thug-life-pixel-mlg-shades-glasses-vector-png-image_6219265.png") %>%
  image_scale(275)

# changing the glasses size and orientation before putting on the meme
glasses_processed <- image_scale(image_rotate(image_background(glasses_image, "none"), 5), "x275")

# composite the glasses image onto the meme at a different offset for each frame
frame1 <- image_composite(image_scale(meme), glasses_processed, offset = "+0-210")
frame2 <- image_composite(image_scale(meme), glasses_processed, offset = "+20-260")
frame3 <- image_composite(image_scale(meme), glasses_processed, offset = "+40-310")
frame4 <- image_composite(image_scale(meme), glasses_processed, offset = "+60-360")
frame5 <- image_composite(image_scale(meme), glasses_processed, offset = "+80-410")

# creating a vector for the animated gif
frames <- c(frame1, frame2, frame3, frame4, frame5)

# creating a vector for the frames and the reverse frames
all_frames <- c(frames, rev(frames))

# animating the vector
animation <- all_frames %>%
  image_animate(fps = 5)

# calling the animated_gif to print
animation

# code to save the animated gif as a gif file
image_write(animation, "my_animation.gif")
My Animated Meme
My Animated Meme

Creativity

My project demonstrates creativity, this is because:

Learning reflection

One important idea I learned from Module 1 (Creating HTML by combining modern technologies) was:

Some things related to data technologies that I am more curious about exploring further are: